<template>
  <div class="page-full">
    <!-- 搜索 -->
    <div class="query-button">
      <el-form>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="reset">查询</el-button>
            <el-button type="warning" @click="showadd">添加</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div>
      <el-table :data="list">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="typename" label="商品分类"></el-table-column>
        <el-table-column prop="goods" label="商品名称"></el-table-column>
        <el-table-column prop="amount" label="商品数量"></el-table-column>
        <el-table-column prop="price" label="商品价格（分）"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
            <el-button @click="showmodify(scope.row.id)" type="warning" size="small"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination
        v-model:current-page="page.pageNumber"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[3, 5, 10, 15]"
        @size-change="getList"
        layout="prev,pager,next,jumper,total,sizes"
        @current-change="getList"
      >
      </el-pagination>
    </div>

    <!-- 弹窗 -->
    <div>
      <!-- 添加 -->
      <div>
        <el-dialog v-model="avisible" title="添加信息">
          <div>
            <el-form>
              <el-form-item>
                <el-input v-model="addInfo.typename" placeholder="商品分类"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="addInfo.goods" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="addInfo.amount" placeholder="商品数量"></el-input-number>
              </el-form-item>
              <el-form-item>
                <el-input-number v-model="addInfo.price" placeholder="商品价格"></el-input-number>
              </el-form-item>
            </el-form>
          </div>

          <template #footer>
            <div style="width: 100%; display: flex; justify-content: flex-start">
              <el-button @click="addReset" type="danger">重置</el-button>
              <el-button @click="add" type="primary">添加</el-button>
            </div>
          </template>
        </el-dialog>
      </div>

      <!-- 修改 -->
      <div>
        <el-dialog v-model="mvisible" title="修改信息">
          <div>
            <el-form>
              <el-form-item>
                <el-input v-model="modifyInfo.typename" placeholder="商品分类"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="modifyInfo.goods" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input-number
                  v-model="modifyInfo.amount"
                  placeholder="商品数量"
                ></el-input-number>
              </el-form-item>
              <el-form-item>
                <el-input-number
                  v-model="modifyInfo.price"
                  placeholder="商品价格"
                ></el-input-number>
              </el-form-item>
            </el-form>
          </div>

          <template #footer>
            <div style="width: 100%; display: flex; justify-content: flex-start">
              <el-button @click="modify" type="primary">保存</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { ElMessage, ElMessageBox } from 'element-plus'

//#region 获取数据
const list = ref([])
const page = ref({
  pageSize: 3,
  pageNumber: 1,
})
const loading = ref(false)
const getList = () => {
  api.get('/exam/goods', page.value, (data) => {
    loading.value = true
    if (data.success) {
      loading.value = false
      list.value = data.data.data
      page.value = data.data.pageBean
      return
    }
    ElMessageBox.alert(data.message, '查询失败')
  })
}
onMounted(() => {
  getList()
})
const reset = () => {
  page.value.pageNumber = 1
}
//#endregion

//#region 添加
const avisible = ref(false)
const addInfo = ref({
  typename: '',
  goods: '',
  amount: '',
  price: '',
})
const showadd = () => {
  addInfo.value = {
    typename: '',
    goods: '',
    amount: '商品数量',
    price: '商品价格',
  }
  avisible.value = true
}
const addReset = () => {
  addInfo.value = {
    typename: '',
    goods: '',
    amount: '商品数量',
    price: '商品价格',
  }
}
const add = () => {
  api.post('/exam/goods', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('添加成功')
      addInfo.value = {
        typename: '',
        goods: '',
        amount: '商品数量',
        price: '商品价格',
      }
      avisible.value = false
      getList()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}
//#endregion

//#region 修改
const mvisible = ref(false)
const modifyInfo = ref({
  id: -1,
  typename: '',
  goods: '',
  amount: '',
  price: '',
})
const showmodify = (id) => {
  api.get(`/exam/goods/${id}`, {}, (data) => {
    loading.value = true
    if (data.success) {
      loading.value = false
      modifyInfo.value = data.data
      mvisible.value = true
      return
    }
    ElMessageBox.alert(data.message, '查询失败')
  })
}

const modify = () => {
  api.put('/exam/goods', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('修改成功')
      mvisible.value = false
      getList()
      return
    }
    ElMessageBox.alert(data.message, '修改失败')
  })
}

//#endregion

//#region 删除
const del = (id) => {
  console.log(id)
  ElMessageBox.alert(`是否要删除: ${id.typename} 吗?`, '')
    .then(() => {
      api.delete(`/exam/goods/${id.id}`, {}, (data) => {
        if (data.success) {
          ElMessage.success('删除成功')
          getList()
          return
        }
        ElMessageBox.alert(data.message, '删除失败')
      })
    })
    .catch(() => {})
}
//#endregion
</script>

<style scoped>
.page {
  margin: 3rem auto;
}
.query-button {
  display: flex;
  justify-content: flex-end;
  padding: 0.2rem 1rem;
  margin: 1rem 0;
}
.page-full {
  margin: 0;
  padding: 0;
}
</style>
